<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人信息 - 手势识别系统</title>
    <link rel="stylesheet" href="/static/style.css">
    <link rel="stylesheet" href="/static/profile.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        /* 优化输入框样式 */
        .info-group input {
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.05);
            color: #fff;
            font-size: 1em;
            transition: all 0.3s ease;
            padding: 12px 15px; /* 增加内边距 */
        }

        .info-group input:focus {
            outline: none;
            border-color: rgba(76, 175, 80, 0.3);
            box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
            background: rgba(255, 255, 255, 0.08);
        }

        .info-group input::placeholder {
            color: rgba(255, 255, 255, 0.4);
        }

        /* 调整按钮样式 */
        .save-btn {
            background: linear-gradient(135deg, #4CAF50, #45a049);
            color: white;
            border: none;
            padding: 12px 30px;
            border-radius: 8px;
            font-size: 1em;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
        }

        .save-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
        }

        .save-btn:active {
            transform: translateY(0);
        }

        .save-btn i {
            font-size: 1.1em;
        }

        /* 优化标签样式 */
        .info-group label {
            display: block;
            margin-bottom: 8px;
            color: rgba(255, 255, 255, 0.8);
            font-weight: 500;
            font-size: 0.95em;
        }

        /* 优化主内容区域 */
        .main-content {
            margin-left: var(--sidebar-width);
            flex: 1;
            padding: 20px;
            min-height: 100vh;
            background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);
        }

        /* 优化个人信息容器 */
        .profile-container {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
            animation: fadeIn 0.5s ease-out forwards;
        }

        /* 优化标题样式 */
        .profile-header h1 {
            color: #fff;
            font-weight: 700;
            margin-bottom: 30px;
            text-align: center;
            font-size: 2.2em;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        /* 优化信息组布局 */
        .profile-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
        }

        /* 动画效果 */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    </style>
</head>
<body>
<!-- 侧边栏 -->
<div class="sidebar">
    <div class="sidebar-header">
        <div class="sidebar-title">
            智能工业手势识别
        </div>
        <div class="user-info">
            <span class="username">{{ current_user.username }}</span>
            <a href="{{ url_for('auth.logout_route') }}" class="logout">退出登录</a>
        </div>
    </div>
    <ul class="nav-menu">
        {% if session.role != 'admin' %}
        <li class="nav-item active">个人信息</li>
        <li class="nav-item" onclick="window.location.href='{{ url_for('gesture.recognition') }}'">实时识别</li>
        <li class="nav-item" onclick="window.location.href='{{ url_for('gesture.gesture_config') }}'">手势配置</li>
        <li class="nav-item" onclick="window.location.href='{{ url_for('gesture.history') }}'">历史记录</li>
        {% else %}
        <li class="nav-item" onclick="window.location.href='{{ url_for('user.user_management') }}'">角色管理</li>
        <li class="nav-item" onclick="window.location.href='{{ url_for('user.user_records') }}'">识别记录</li>
        {% endif %}
    </ul>
</div>

<!-- 主内容区域 -->
<div class="main-content">
    <div class="main-container">
        <div class="profile-container">
            <div class="profile-header">
                <h1>
                    <i class="fas fa-user-circle"></i>
                    个人信息
                </h1>
            </div>

            <div class="profile-content">
                <div class="info-group">
                    <label for="username">用户名</label>
                    <input type="text" id="username" value="{{ user.username }}" readonly>
                </div>

                <div class="info-group">
                    <label for="email">邮箱</label>
                    <input type="email" id="email" value="{{ user.email }}" placeholder="请输入邮箱">
                </div>

                <div class="info-group">
                    <label for="school">学校</label>
                    <input type="text" id="school" value="{{ user.school }}" placeholder="请输入学校">
                </div>

                <div class="info-group">
                    <label for="department">院系</label>
                    <input type="text" id="department" value="{{ user.department }}" placeholder="请输入院系">
                </div>

                <div class="info-group">
                    <label for="student_id">学号</label>
                    <input type="text" id="student_id" value="{{ user.student_id }}" placeholder="请输入学号">
                </div>

                <div class="info-group">
                    <label for="phone">手机号</label>
                    <input type="tel" id="phone" value="{{ user.phone }}" placeholder="请输入手机号">
                </div>
            </div>

            <div class="save-container">
                <button class="save-btn" onclick="updateProfile()">
                    <i class="fas fa-save"></i>
                    保存修改
                </button>
            </div>
        </div>
    </div>
</div>

<script>
    function updateProfile() {
        const data = {
            email: document.getElementById('email').value,
            school: document.getElementById('school').value,
            department: document.getElementById('department').value,
            student_id: document.getElementById('student_id').value,
            phone: document.getElementById('phone').value
        };

        fetch('{{ url_for('
        gesture.update_profile
        ') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(data)
        }
    )
    .
        then(response => response.json())
                .then(data => {
                    if (data.success) {
                        alert('个人信息更新成功！');
                    } else {
                        alert('更新失败：' + data.error);
                    }
                })
                .catch(error => {
                    alert('更新失败：' + error);
                });
    }
</script>
</body>
</html> 